<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>全部订单</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-table-cell {
            height: 50px;
            line-height: 50px;
        }

    </style>
<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>全部订单</legend>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="number" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search layui-border-blue"></i>
                            点击我搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="orderAllTable" lay-filter="orderAllTable"></table>
    </div>
</div>
<script id="tool" type="text/html">
    <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script id="photo" type="text/html">
    <img src="/file/fc/showImg/{{d.userPhoto}}" style="width: 30px;height: 60px;">
</script>
<script>

    var $;

    layui.use(['table','form','jquery','layer'],function(){
        var table = layui.table,form = layui.form,layer = layui.layer;
        $ = layui.jquery;


        //加载表格
        table.render({
            elem:'#orderAllTable',
            height:'full-160',
            page:true,
            toolbar:'#tableBar',
            url:'/order/oc/find',
            cols:[
                [
                    {type:'numbers',fixed:'left'},
                    {type:'checkbox',fixed:'left'},
                    {field:'number',title:'订单编号',width:160},
                    {field:'userPhoto',title:'用户头像',width:120,templet: '#photo',align: 'center'},
                    {field:'user',title:'下单用户'},
                    {field:'money',title:'订单金额',width:120},
                    {field:'actuallyPaid',title:'实际付款',width:120},
                    {field:'orderTime',title:'下单时间',width:230},
                    {field:'paymentTime',title:'支付时间',width:230},
                    {field:'status',title:'订单状态',width:150,templet:function (res) {
                            var str = "";
                            switch (res.status){
                                case 0:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>待支付</span>"
                                    break;
                                case 1:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>待发货</span>"
                                    break;
                                case 2:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>待收货</span>"
                                    break;
                                case 3:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>已完成</span>"
                                    break;
                                case 4:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>支付异常</span>"
                                    break;
                                case 5:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>退换货</span>"
                                    break;
                                case 6:
                                    str = "<span style='margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'>待退款</span>"
                                    break;

                            }
                            return str;
                        }
                    },
                    {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#tool'},
                ]
            ]

        })

        //监听搜索按钮
        form.on('submit(searchBtn)',function (data){
            var dataForm = data.field;
            table.reload('orderAllTable',{
                page: {
                    curr:1
                },
                where:{
                    number:dataForm.number,

                }
            })
        })
        var active = {
            dialog:function (id) {
                var b = false;
                top.layer.open({
                    type:2,
                    title:'订单详情',
                    content:'/page/order/details/' + id,
                    area:['700px','650px'],
                    btn:['取消'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) layui.table.reload('orderAllTable');
                    }
                })
            },
            delete:function (id) {
                layer.confirm('确实删除这些记录吗？',function (index) {
                    if(index>0){
                        $.ajax({
                            type:'post',
                            url:'/order/oc/delete',
                            data:{
                                id:id,
                            },
                            dataType: 'json',
                            success:function (result) {
                                var tip = result.msg;
                                layer.msg(tip);
                                if(result.is){
                                    layui.table.reload('orderAllTable');
                                }
                            }
                        })
                    }
                    layer.close(index);
                })
            }
        }

        table.on('tool(orderAllTable)',function (obj) {
            var event = obj.event;
            if ('details' == event) {
                active.dialog(obj.data.id);
            }else if ('delete' == event){
                active.delete(obj.data.id);
            }
        });
    });

</script>
</body>
</html>